<template>
  <div class="pane">
    <div class="pane-top-wrap">
      <el-button @click="handleCreatePage" type="primary">创建新页面</el-button>
      <el-button type="primary">从页面库中添加</el-button>
    </div>
    <el-table :data="dataList" border height="calc(100vh - 200px)">
      <template v-for="rowItem in tableConfig.fields">
        <el-table-column v-if="rowItem.type == 'index'" type="index" label="序号" :key="rowItem.id" />
        <el-table-column v-else-if="rowItem.type == 'button'" :label="rowItem.label" :key="rowItem.id">
          <template slot-scope="scope">
            <el-button @click="handleTableAction(rowItem.opt.action, scope.row)" :type="rowItem.opt.type"> {{ rowItem.opt.text }} </el-button>
          </template>
        </el-table-column>
        <el-table-column :width="rowItem.width" v-else :label="rowItem.label" :prop="rowItem.model" :key="rowItem.id" />
      </template>
    </el-table>
  </div>
</template>

<script>
const isdebug = true
import { tableConfig } from './config'
import Edit from './edit.vue'
export default {
  name: 'AppManagePage',
  props: {
    id: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      tableConfig,
      dataList: [],
    }
  },
  computed: {},
  created() {},
  mounted() {
    this.init()
  },
  methods: {
    async init() {
      this.getList()
    },

    handleTableAction(action, row) {
      const funcList = {
        navToDesign: (row) => {
          console.log('call > navToDesign', row)
          this.$router.push({ name: 'PageDesign', params: { id: row.scenarioId } })
        },
      }
      funcList[action](row)
    },
    async getList() {
      const res = await this.$request({
        url: '/lowcode/getDataBySql',
        method: 'post',
        data: { sqlid: '应用下的页面列表', where: `appId = '${this.id}'` },
      })
      // console.log('this.appInfo', this.appInfo)
      this.dataList = res.list
      // console.log('pages > getList > res', res)
    },
    async handleCreatePage() {
      const res = await this.$showDialog({
        component: Edit,
        dialogParams: {
          title: '创建新页面',
          width: '500px',
          'close-on-click-modal': false,
        },
        childParams: {},
      })

      if (res.closeType == 'confirm') {
        const { param } = res
        const { scenarioId } = param

        const data = [
          {
            tableName: 'lce_scenarioList',
            action: 'insert',
            dataList: [param],
          },
          {
            tableName: 'appPageList',
            action: 'insert',
            dataList: [
              {
                id: this.$uuid(),
                scenarioId,
                appId: this.id,
              },
            ],
          },
        ]
        const updateRes = await this.$request({
          url: '/lowcode/commonUpdate',
          method: 'post',
          data,
        })
        if (updateRes.code == 0) this.$message.success(updateRes.msg)
        // console.log('handleCreatePage res', updateRes)
      }
    },
  },
}
</script>
<style lang="scss" scoped>
.pane-top-wrap {
  margin: 0 0 10px 0;
  height: 28px;
  width: 100%;
  display: flex;
  align-items: center;
}
</style>
